<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="~{ fragment/common::common_head}" />
    <title>文章管理 - EasyBlog博客</title>
    <!--加载动画和确认框特效-->
    <link rel="stylesheet" href="../static/css/loading/zeroModal.css" th:href="@{/static/css/loading/zeroModal.css}">
</head>
<body>

<!--导航-->
<div th:replace="~{fragment/nav :: navbar}"></div>

<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
        <!--侧边栏-->
        <div th:replace="~{fragment/blog-manage::manage}"></div>
        <!--博客内容-->
        <div class="thirteen wide column">
            <!--header-->
            <div th:replace="~{fragment/blog-manage::header}"></div>
            <!--条件查询表单-->
            <form th:action="@{/manage/blog/search}" method="GET" class="ui attached segment form"
                  style="background-color: #f2f5f7">
                <div class="inline fields stackable">
                    <span class="m-black m-inline-block m-mobile-hide">筛选：</span>
                    <input type="hidden" name="userId" th:value="${user.getUserId()}">
                    <!--年-->
                    <div class="field">
                        <div class="ui selection dropdown compact m-mobile-wide-selectBar-calender year">
                            <input type="hidden" name="year" th:if="${currentYear!=null and currentYear!='年'}" th:value="${currentYear}">
                            <input type="hidden" name="year" th:if="${currentYear==null or currentYear=='' or currentYear=='年'}">
                            <i class="dropdown icon"></i>
                            <div class="default text" th:if="${currentYear==null or currentYear=='' or currentYear=='年'}">年</div>
                            <div class="text" th:if="${currentYear!=null and currentYear!='年'}" th:text="${currentYear}"></div>
                            <div class="menu compact">
                                <div class="item" data-value="不限">不限</div>
                                <div class="item" th:each="year:${years}" th:data-value="${year}" th:text="${year}">2019</div>
                            </div>
                        </div>
                    </div>
                    <!--月-->
                    <div class="field">
                        <div class="ui selection dropdown compact m-mobile-wide-selectBar-calender month">
                            <input type="hidden" name="month" th:if="${currentMonth!=null and currentMonth!='月'}" th:value="${currentMonth}">
                            <input type="hidden" name="month" th:if="${currentMonth==null||currentMonth=='' or currentMonth=='月'}" >
                            <i class="dropdown icon"></i>
                            <div class="default text" th:if="${currentMonth==null||currentMonth=='' or currentMonth=='月'}">月</div>
                            <div class="text" th:if="${currentMonth!=null and currentMonth!='月'}" th:text="${currentMonth}">月</div>
                            <div class="menu compact">
                                <div class="item" data-value="不限">不限</div>
                                <div class="item" th:each="month:${months}" th:data-value="${month}" th:text="${month}">9</div>
                            </div>
                        </div>
                    </div>
                    <!--文章类型-->
                    <div class="field">
                        <div class="ui selection dropdown category m-mobile-wide-selectBar type"
                             style="max-width: 30px !important;">
                            <input type="hidden" name="articleType" th:if="${currentType!=null and  currentType!='文章类型'}" th:value="${currentType}">
                            <input type="hidden" name="articleType" th:if="${currentType==null or currentType=='' or currentType=='文章类型'}">
                            <i class="dropdown icon"></i>
                            <div class="default text" th:if="${currentType==null or currentType=='' or currentType=='文章类型'}">文章类型</div>
                            <div class="text" th:if="${currentType!=null and  currentType!='文章类型'}" th:text="${currentType}">文章类型
                            </div>
                            <div class="menu">
                                <div class="item" data-value="不限">不限</div>
                                <div class="item" data-value="原创">原创</div>
                                <div class="item" data-value="转载">转载</div>
                                <div class="item" data-value="翻译">翻译</div>
                            </div>
                        </div>
                    </div>
                    <!--分类-->
                    <div class="field">
                        <div class="ui selection dropdown m-mobile-wide-selectBar category"
                             style="max-width: 30px !important;">
                            <input type="hidden" name="categoryName" th:value="${currentCategory}" th:if="${currentCategory!=null and currentCategory!='分类专栏'}">
                            <input type="hidden" name="categoryName" th:if="${currentCategory==null or currentCategory=='' or currentCategory=='分类专栏'}">
                            <i class="dropdown icon"></i>
                            <div class="default text" th:if="${currentCategory==null or currentCategory=='' or currentCategory=='分类专栏'}">分类专栏</div>
                            <div class="text" th:if="${currentCategory!=null and currentCategory!='分类专栏'}" th:text="${currentCategory}">分类专栏</div>
                            <div class="menu">
                                <div class="item" data-value="不限">不限</div>
                                <div class="item" th:each="category:${categories}"
                                     th:data-value="${category.getCategoryName()}"
                                     th:text="${category.getCategoryName()}">
                                    SpringBoot
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--文章标题-->
                    <div class="field">
                        <input class="m-mobile-wide-selectBar topic" th:if="${articleTopic!=null and articleTopic!=''}"
                               type="text" name="articleTopic" th:value="${articleTopic}">
                        <input class="m-mobile-wide-selectBar topic" th:if="${articleTopic==null or articleTopic==''}"
                               type="text" name="articleTopic" placeholder="标题">
                    </div>
                    <div id="searchBar" class="field m-mobile-wide-selectBar">
                        <button class="ui tiny red  button"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
                <!--点击搜索按钮后弹出来的选择框-->
                <div th:if="${showSearchCondition==null}" class="inline fields m-margin-top-large"
                     style="margin-bottom: 5px !important;display: none !important;">
                    <div class="inline fields">
                        <div class="field">
                            <div class="ui radio checkbox">
                                <input type="radio" name="frequency" checked="checked">
                                <label>全部</label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui radio checkbox">
                                <input type="radio" name="frequency">
                                <label>只显示已发布文章</label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui radio checkbox">
                                <input type="radio" name="frequency">
                                <label>只显示私密文章</label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui radio checkbox">
                                <input type="radio" name="frequency">
                                <label>只显示草稿</label>
                            </div>
                        </div>
                        <a href="blog-manage.html" style="margin-left: 25em !important;">重置搜索</a>
                    </div>
                </div>
                <div id="reloadSearchBar" th:if="${showSearchCondition==true}" class="inline fields m-margin-top-large"
                     style="margin-bottom: 5px !important;">
                    <div class="inline fields">
                        <div class="field">
                            <div class="ui radio checkbox">
                                <input type="radio" name="frequency" checked="checked">
                                <label>全部</label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui radio checkbox">
                                <input type="radio" name="frequency">
                                <label>只显示已发布文章</label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui radio checkbox">
                                <input type="radio" name="frequency">
                                <label>只显示私密文章</label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui radio checkbox">
                                <input type="radio" name="frequency">
                                <label>只显示草稿</label>
                            </div>
                        </div>
                        <a onclick="restoreSearch()" style="margin-left: 28em !important;cursor: pointer;">重置搜索</a>
                    </div>
                </div>
            </form>

            <!--content-->
            <div class="ui attached bottom segment border-bt-none"
                 style="padding-top: 0 !important;padding-bottom: 0 !important;">
                <div th:if="${articlePages!=null&&!#lists.isEmpty(articlePages.getList())}"
                     th:each="article:${articlePages.getList()}"
                     class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear border-dashed"
                     style="padding-bottom: 20px !important;padding-top: 10px !important;">
                    <div class="ui mobile reversed stackable grid">
                        <div class="sixteen wide column">
                            <button th:switch="${article.getArticleType()}"
                                    class="ui mini red basic button  m-inline-block ">
                                <span th:case="0">原创</span>
                                <span th:case="1">转载</span>
                                <span th:case="2">翻译</span>
                            </button>
                            <h3 class="ui header m-inline-block m-margin-top-small m-margin-bottom-small">
                                <a href="#" th:href="@{/article/details/{id}(id=${article.getArticleId()},visitorUId=${user.getUserId()})}" title="点击查看"
                                   style="color: #333333" th:text="${article.getArticleTopic()}">你真的理解什么是财富自由吗？</a>
                            </h3>
                            <div class="ui stackable grid">
                                <div class="eleven wide column">
                                    <div class="ui mini horizontal link list">
                                        <div class="item">
                                            <span style="font-size: 12px !important;"
                                                  th:switch="${article.getArticleStatus()}">
                                                 <span th:case="0">公开</span>
                                                 <span th:case="1">私有</span>
                                                 <span th:case="2">草稿</span>
                                            </span>
                                        </div>
                                        <div class="item">
                                            <i class="calendar icon"></i>
                                            <span style="font-size: 12px !important;" th:text="${#dates.format(article.getArticlePublishTime(),'yyyy年MM月dd  hh:mm:ss')}">2017-10-01</span>
                                        </div>
                                        <div class="item">
                                            <i class="eye icon"></i>
                                            <span style="font-size: 12px !important;" th:text="${article.getArticleClick()}">2342</span>
                                        </div>
                                        <div class="item">
                                            <i class="comment alternate icon"></i>
                                            <span style="font-size: 12px !important;" th:text="${article.getArticleCommentNum()}">2342</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="right aligned five wide column">
                                    <div class="five  wide  column">
                                        <div class="ui horizontal list">
                                            <div class="item">
                                                <a href="#" onclick="editArticleFirstImg(this)" th:if="${article.getArticleStatus() ne '3'}" style="color: #349EDF" title="增加文章入口图片不仅仅会更美观些，还可以让访客能更快速的了解你的文章要义">
                                                    配置文章首图
                                                    <input class="articleId" type="text" hidden th:value="${article.getArticleId()}">
                                                    <input class="articleFirstPic" type="text" hidden th:value="${article.getArticleFirstPicture()}">
                                                </a>
                                                <a href="javascript:void(0)" th:if="${article.getArticleStatus() eq '3'}" style="color: #666;cursor: not-allowed;" >
                                                    配置文章首图
                                                </a>
                                            </div>
                                            <div class="item">
                                                <a href="#" title="点击修改文章" th:if="${article.getArticleStatus() ne '3'}"  th:href="@{/manage/blog/edit(articleId=${article.getArticleId()},userId=${user.getUserId()})}" style="color: #349EDF">编辑</a>
                                                <a href="javascript:void(0)" title="文章已删除请在回收站处理"  th:if="${article.getArticleStatus() eq '3'}"  style="color: #666;cursor: not-allowed;">编辑</a>
                                            </div>
                                            <div class="item">
                                                <a href="#" th:if="${article.getArticleStatus() ne '3'}" title="点击将文章放入回收站（此文章将在主页面不可见）"  th:href="@{/manage/blog/delete(articleId=${article.getArticleId()},userId=${user.getUserId()})}" style="color: #CA0C16">删除</a>
                                                <!--被删除之后的文章删除按钮变成灰色并且删除操作不可在使用-->
                                                <a href="javascript:void(0)" th:if="${article.getArticleStatus() eq '3'}" title="文章已删除请在回收站处理" style="color: #666;cursor: not-allowed;">删除</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--没有文章-->
            <div class="ui bottom attached segment " th:if="${articlePages.getTotal()==0}" style="padding-top: 10rem !important;padding-left: 30rem !important;padding-bottom: 20rem !important;">
                <div style="color: grey !important;font-size: 14px !important;">没有符合条件的文章</div>
            </div>
            <div th:if="${articlePages.getTotal()<=20&&articlePages.getTotal()!=0}" class="ui bottom attached segment"
                 style="padding-top: 10em !important;padding-bottom: 10em !important;border-top: 1px #ccc solid"></div>

            <!--分页按钮-->
            <div th:if="${articlePages.getTotal()>20}" class="ui bottom attached segment " style="border-top: 1px solid #ccc">
                <div class="ui middle aligned two column grid">
                    <div  style="margin: 5px auto;float: left !important;">
                        <div class="ui buttons">
                            <a th:if="${articlePages.isHasPreviousPage()}"
                               th:href="@{/manage/blog/(page=${articlePages.getPrePage()},userId=${user.getUserId()})}">
                                <button class="ui button" style="background: white !important;font-weight: 100 !important;">上一页</button>
                            </a>
                            <a th:if="${!articlePages.isIsFirstPage()}"
                               th:href="@{/search/details(query=${query},page=1)}">
                                <button class="ui button"
                                        style="background: white !important;font-weight: 100 !important;">首页
                                </button>
                            </a>
                            <a th:each="pageNo:${articlePages.getNavigatepageNums()}"
                               th:href="@{/manage/blog/(page=${pageNo},userId=${user.getUserId()})}">
                                <button class="ui button pages">
                                    [[${pageNo}]]
                                </button>
                            </a>
                            <a th:href="@{/manage/blog/(page=${articlePages.getNextPage()},userId=${user.getUserId()})}">
                                <button class="ui right button" style="background: white !important;font-weight: 100 !important;">
                                    下一页
                                </button>
                            </a>
                            <a th:if="${!articlePages.isIsLastPage()}"
                               th:href="@{/search/details(query=${query},page=${articlePages.getPages()})}">
                                <button class="ui button"
                                        style="background: white !important;font-weight: 100 !important;">尾页
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--图片上传工具-->
<div class="ui small second coupled modal transition hidden">
    <div class="header">
        上传文章首图
    </div>
    <div class="content">
        <div class="ui from" style="cursor: pointer;">
            <input id="input_file"
                   style="position:absolute;opacity:0;height: 35px !important;width: 117px !important;padding: 0 !important;"
                   onchange="show(this)" accept="image/*" type="file"/>
            <button class="ui button" style="cursor: pointer;"><i class="upload icon"></i>上传图片</button>
            <div style="margin-top: 10px; ">
                <img id="pre-look"  th:src="@{/static/images/upload.jpg}" style="width: 500px;height: 300px;margin-left: 100px">
            </div>
        </div>
    </div>
    <div class="actions">
        <div class="ui  button article-upload-image-cancel">取消</div>
        <div class="ui green button article-upload-image-ok">
            <i class="checkmark  icon"></i>
            上传
        </div>
    </div>
</div>

<div style="height: 10em"></div>
<!--底部footer-->
<div th:replace="~{ fragment/common :: footbar}"></div>

</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../../static/js/easyblog.js" th:src="@{/static/js/easyblog.js}"></script>
<script src="../static/js/loading/mustache.js" th:src="@{/static/js/loading/mustache.js}"></script>
<script src="../static/js/loading/zeroModal.js" th:src="@{/static/js/loading/zeroModal.js}"></script>
<script type="text/javascript">
    //初始化
    $(document).ready(function () {
        toggleStatus();
        logOut();
        showCurrentPageNum();
        showPageZoomWarning();
        $('.ui.dropdown').dropdown({
            on: 'hover',
            clearable: true
        });

        $('#msg-btn').click(function () {
            $('.ui.modal').modal('hide');
        });
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });

        $('#side-bnt3').css("background", "#DB2828");
        $('#side-bnt3').css("color", "#ffffff");
        $('#all').css("cssText", "color: #349EDF !important");
    });


    function showCurrentPageNum() {
        let obj = document.getElementsByClassName('pages');
        let page = [[${articlePages.pageNum}]];
        for (let i = 0; i < obj.length; i++) {
            if (obj[i].textContent == page) {
                $(obj[i]).css("cssText", "background:#ddd !important");
            }
        }
    }


    function restoreSearch() {
        $('.year').find('input').removeAttr('value');
        $('.year').find('.text').remove();
        $('.year').find('.dropdown.icon').after('<div class="default text">年</div>\n');

        $('.month').find('.text').remove();
        $('.month').find('input').removeAttr('value');
        $('.month').find('.dropdown.icon').after('<div class="default text">月</div>\n');

        $('.type').find('.text').remove();
        $('.type').find('input').removeAttr('value');
        $('.type').find('.dropdown.icon').after('<div class="default text">文章类型</div>\n');

        $('.category').find('.text').remove();
        $('.category').find('input').removeAttr('value');
        $('.category').find('.dropdown.icon').after('<div class="default text">分类专栏</div>\n');

        $('.topic').removeAttr('value');
        $('.topic').attr('placeholder','标题');
    }
</script>
<script>

    /**
     *
     * @param identityObj
     */
    function editArticleFirstImg(identityObj) {
        //点击“配置文章首图”时把文章的ID记下来
        sessionStorage.setItem("articleId", $(identityObj).find('.articleId').val());
        let articleFirstPic = $(identityObj).find('.articleFirstPic').val();
        if (articleFirstPic != null && articleFirstPic != "") {
            $('#pre-look').attr('src',articleFirstPic);
        }else{
            $('#pre-look').attr('src','/static/images/upload.jpg');
        }
        $('.second.modal').modal("show");
        $('.second.modal').modal({
            closable:false
        });
    }

    $('.article-upload-image-cancel').click(function () {
        $('.second.modal').modal("hide");
    });

    $('.article-upload-image-ok').click(function () {
        let articleId=sessionStorage.getItem("articleId");
        //获取图片的base64串
        let imgByte64Str = $('#pre-look')[0].src;
        if (imgByte64Str != null && imgByte64Str != "") {
            if(articleId!=""&&articleId>0) {
                _loading(2);
                $.ajax({
                    url: "/manage/blog/upload_article_img/",
                    method: "POST",
                    sync: false,
                    data: {imgByte64Str: imgByte64Str, articleId: articleId},
                    dataType: "json",
                    success: function (response) {
                        if (response.success) {
                            _loadingClose();
                            $('.second.modal').modal("hide");
                            showSuccessMessage("上传成功！");
                            history.go(0);
                        } else {
                            showErrorMessage("服务异常，请稍后重试！")
                        }
                    },
                    error: function () {
                        _loadingClose();
                        showErrorMessage("服务异常，请稍后重试！")
                    }
                })
            }else{
                showWarningMessage("无法上传，请登录后重试！");
            }
        } else {
            showWarningMessage("请选择图片");
        }
    });
    //从本地选择图片后，页面显示
    function show(obj) {
        let rd = new FileReader(); //创建文件读取对象
        let files = obj.files[0];  //获取file组件中的文件
        rd.readAsDataURL(files);   //文件读取装换为base64类型
        rd.onloadend = function (e) {
            //加载完毕之后获取结果赋值给img
            $('#pre-look').height(300);
            $('#pre-look').width(450);
            document.getElementById("pre-look").src = this.result;
        };

    }
</script>
</html>